<!--
 * @Description: 大前端学习
 * @Version: H5
 * @Author: Ajax
 * @Date: 2020-04-22 20:24:12
 * @LastEditors: Ajax
 * @LastEditTime: 2020-05-16 11:37:23
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品效果图切换(换肤)</title>
    <style>
        body {
            position: relative;
        }

        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            overflow: hidden;
        }

        li {
            float: left;
            margin: 15px 5px;
            cursor: pointer;
            border: 2px solid transparent;
        }

        li:hover {
            border: 2px solid red;
        }

        button {
            position: absolute;
            top: 36%;
            color: #333;
            outline: none;
            border-color: transparent;
            box-shadow: 1px 0px 15px rgba(0, 0, 0, .2);
            background-color: #ccc;
            cursor: pointer;
            opacity: .7;
        }

        :hover {
            opacity: 1;
        }

        .prew {
            left: 8px;
        }

        .next {
            left: 400px;
        }
    </style>
</head>

<body>
    <img src="images/img01.jpg" alt="" width="450px" border="1" class="Bigimg">
    <ul>
        <li><a><img src="images/img01.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img02.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img03.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img04.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img05.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img06.jpg" alt="" width="50"></a></li>
        <li><a><img src="images/img07.jpg" alt="" width="50"></a></li>
    </ul>
    <button class="prew">上一张</button>
    <button class="next">下一张</button>
    <script src="methods/$-select-jq.js"></script>
</body>
<script>
    let BigImg = $('.Bigimg');
    let smallImg = $('ul').querySelectorAll('img');
    let lis = document.querySelectorAll('li')

    // 滑动切换 
    function move(i) {
        smallImg[i].addEventListener('mouseover', function () {
            BigImg.setAttribute('src', this.getAttribute('src'));
        })
    }
    function forLoop(fn, begin, arr) {
        for (let i = begin || 0, len = arr.length; i < len; i++) {
            fn(i)
        }
    }
    forLoop(move, 0, smallImg)

    // 点击切换图片
    function clickChange(min, max) {
        let minIndex = min, maxIndex = max, currentIndex = minIndex;
        $('.next').addEventListener('click', () => {
            currentIndex == maxIndex ? currentIndex = minIndex : currentIndex++
            BigImg.setAttribute('src', 'images/img0' + currentIndex + '.jpg')

            forLoop(borderChane, 0, lis)
            lis[currentIndex - 1].style.borderColor = '#f10'

        })
        $('.prew').addEventListener('click', () => {
            currentIndex == minIndex ? currentIndex = maxIndex : currentIndex--
            BigImg.setAttribute('src', 'images/img0' + currentIndex + '.jpg')

            forLoop(borderChane, 0, lis)
            lis[currentIndex - 1].style.borderColor = '#f10'
        })
    }
    clickChange(1, 7)

    // 点击加对应的边框
    function borderChane(i) {
        lis[i].style.borderColor = ''
    }
</script>

</html>